﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Charm Setting</title>
    </head>
    
<body><h2>Charm Setting</h2>
<p>CharmSetting is a static class that helps you to configure any UserControl as charm bar setting using a single statement. The setting has 1px border, a header and content as the user control. Header uses the setting command label as header text and&nbsp; the Assets/SmallLogo.png as the small icon. Border colour will be 20% darker than the header colour. The default width of the setting is 346px and apply EntranceThemTransition to the setting flyout. If you need, you can change the default property values using the static properties of CharmSetting class.</p>
<p><img style="vertical-align: middle; margin-top: 1px;" src="http://download-codeplex.sec.s-msft.com/Download?ProjectName=storeapplib&amp;DownloadId=597685" alt="Charmbar Setting" width="256" height="134" /></p>
<h3>Namespace</h3>
<p><code>StoreAppLib.Controls</code></p>
<h3>Using Charm Setting</h3>
<p>To use CharmSetting in your project, add reference to the StoreAppLib project&nbsp; or install StoreAppLib from Visual Studio "Manage NuGet Packages".</p>
<p>First, you create a UserControl as charm setting for your application. The recommended size for charm setting is 346 or 646. The default charm setting has 1px border. So set your control width to either 344 or 644. To configure the user control as charm setting content, call the AddFlyout method with the charm setting "command label" and "Type" of the UserControl in&nbsp; the App.xaml.cs file.</p>
<p><code><span style="font-size: 9.5pt; color: #2b91af;"><span style="font-size: 9.5pt; color: #2b91af;"><span style="font-size: 9.5pt; color: #2b91af;"><span style="font-size: 9.5pt; color: #2b91af;">CharmSetting<span style="font-size: 9.5pt;"><span style="font-size: 9.5pt;">.</span></span></span></span></span></span><span style="font-size: 9.5pt;"><span style="font-size: 9.5pt;"><span style="font-size: 9.5pt;">AddFlyout(</span></span></span><span style="font-size: 9.5pt; color: #2b91af;"><span style="font-size: 9.5pt; color: #a31515;">"About StoreAppLib"</span><span style="font-size: 9.5pt;"><span style="font-size: 9.5pt;">, </span></span><span style="font-size: 9.5pt; color: #0000ff;"><span style="font-size: 9.5pt; color: #0000ff;"><span style="font-size: 9.5pt; color: #0000ff;">typeof</span></span></span></span><span style="font-size: 9.5pt;"><span style="font-size: 9.5pt;">(AboutStoreAppLib));</span></span></code></p>
<p>The above code shows "About StoreAppLib" as charm setting command label. When you click on the command, an instance of the AboutStoreAppLib user control is shown as charm setting with default configuration.</p>
<p>Use the following code to set width of the charm setting to 346.</p>
<p><code><span style="font-size: 9.5pt; color: #2b91af;">CharmSetting<span style="font-size: 9.5pt;">.</span></span><span style="font-size: 9.5pt;"><span style="font-size: 9.5pt;">FlyoutWidth = StoreAppLib.<span style="font-size: 9.5pt; color: #2b91af;">CharmSettingFlyoutWidth</span>.Narrow</span></span><span style="font-size: 9.5pt;"><span style="font-size: 9.5pt;"><span style="font-size: 9.5pt;">;</span></span></span></code></p>
<p>Use the following code to set width of the charm setting to 646.</p>
<p><code><span style="font-size: 9.5pt; color: #2b91af;">CharmSetting<span style="font-size: 9.5pt;">.</span></span><span style="font-size: 9.5pt;"><span style="font-size: 9.5pt;">FlyoutWidth = StoreAppLib.<span style="font-size: 9.5pt; color: #2b91af;">CharmSettingFlyoutWidth</span>.Wide</span></span><span style="font-size: 9.5pt;"><span style="font-size: 9.5pt;"><span style="font-size: 9.5pt;">;</span></span></span></code></p>
<p>Following are the other CharmSetting properties you can use to customize the charm setting.</p>
<ul>
<li><code><span style="font-size: 9.5pt; color: #2b91af;">CharmSetting</span><span style="font-size: 9.5pt;">.BorderThickness</span></code> : Charm setting border. Default is 1px. </li>
<li><code><span style="font-size: 9.5pt; color: #2b91af;">CharmSetting</span><span style="font-size: 9.5pt;">.BackgroundColor</span></code>: Content area background colour. Default is white. </li>
<li><code><span style="font-size: 9.5pt; color: #2b91af;">CharmSetting</span><span style="font-size: 9.5pt;">.HeaderBackgroundColor</span></code>: Header background colour. Default is Color.FromArgb(255, 0, 77, 96). </li>
<li><code><span style="font-size: 9.5pt; color: #2b91af;">CharmSetting</span><span style="font-size: 9.5pt;">.HeaderForegroundColor</span></code>: Header foreground colour. Default is white. </li>
<li><code><span style="font-size: 9.5pt; color: #2b91af;">CharmSetting</span><span style="font-size: 9.5pt;">.HeaderFontFamily</span></code>: Header text font family. Default is &quot;Segoe UI&quot;. </li>
<li><code><span style="font-size: 9.5pt; color: #2b91af;">CharmSetting</span><span style="font-size: 9.5pt;">.HeaderFontSize</span></code>: Header text font size. Default is 26.667. </li>
<li><code><span style="font-size: 9.5pt; color: #2b91af;">CharmSetting</span><span style="font-size: 9.5pt;">.HeaderFontStyle</span></code>: Header text font style. Default is Normal. </li>
<li><code><span style="font-size: 9.5pt; color: #2b91af;">CharmSetting</span><span style="font-size: 9.5pt;">.HeaderRenderTransform</span></code>: Header text render transorm. Default value align the back button bottom and header text base. </li>
<li><code><span style="font-size: 9.5pt; color: #2b91af;">CharmSetting</span><span style="font-size: 9.5pt;">.BackButtonForegroundColor</span></code>: Header back button colour. Default is white. </li>
<li><code><span style="font-size: 9.5pt; color: #2b91af;">CharmSetting</span><span style="font-size: 9.5pt;">.Icon</span></code> : Small header icon ImageSource. </li>
<li><code><span style="font-size: 9.5pt; color: #2b91af;">CharmSetting</span><span style="font-size: 9.5pt;">.Animation</span></code> : The animation type. By default, EntranceThemeTransition will be applied to charm setting flyout. Set the property to "Content" to apply animation to flyout content instead of animating entire flyout. </li>
</ul>
<p>If you have any custom action to perform before showing the charm setting flyout, you can do it by defining call back as shown below.</p>
<code>
<span style="font-size: 9.5pt; color: #2b91af;">CharmSetting</span><span style="font-size: 9.5pt;">.AddFlyout(</span><span style="font-size: 9.5pt; color: #a31515;">"Command Id"</span><span style="font-size: 9.5pt;">, </span><span style="font-size: 9.5pt; color: #a31515;">"Command Label"</span><span style="font-size: 9.5pt;">, <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span style="font-size: 9.5pt; color: #0000ff;">new</span><span style="font-size: 9.5pt;"> </span><span style="font-size: 9.5pt; color: #2b91af;">UICommandInvokedHandler</span><span style="font-size: 9.5pt;">(</span><span style="font-size: 9.5pt; color: #0000ff;">this</span><span style="font-size: 9.5pt;"><code>.OnSettingCommandSelect));</code></span><br />
    <br />
    <span style="font-size: 9.5pt; color: #008000;">//// Setting command callback<br /></span><span style="font-size: 9.5pt;"><span style="font-size: 9.5pt; color: #0000ff;">private</span> <span style="font-size: 9.5pt; color: #0000ff;">void</span> OnSettingCommandSelect(Windows.UI.Popups.<span style="font-size: 9.5pt; color: #2b91af;">IUICommand</span> command) <br />{<br />&nbsp;&nbsp;&nbsp; </span><span style="font-size: 9.5pt; color: #2b91af;">CharmSettingFlyout</span><span style="font-size: 9.5pt;"> flyout = </span><span style="font-size: 9.5pt; color: #0000ff;">new</span><span style="font-size: 9.5pt;"> </span><span style="font-size: 9.5pt; color: #2b91af;">CharmSettingFlyout</span><span style="font-size: 9.5pt;">(</span><span style="font-size: 9.5pt; color: #0000ff;"><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; new</span><span style="font-size: 9.5pt;"> </span><span style="font-size: 9.5pt; color: #2b91af;">YourSettingUserControl</span><span style="font-size: 9.5pt;">(), <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; StoreAppLib.</span><span style="font-size: 9.5pt; color: #2b91af;">CharmSettingAnimation</span><span style="font-size: 9.5pt;"> .Content); </span>
&nbsp;&nbsp;&nbsp;&nbsp; 
    <br />
&nbsp;&nbsp;&nbsp; flyout.Open();<br />}
</code>

</body>
</html>